<template>
  <div class="content-box">
    <e-heading grade="1">{{title}}</e-heading>
    <div class="tem_preview">
      <div class="tem_show">
        <!--title-->
        <div class="plan_show_title" v-if="form.information.value">
          <e-cellbox middle class="title-manage">
            <e-cell-item class="planlft">
              <div class="plan_stitle"><span>教学信息</span><i></i></div>
            </e-cell-item>
          </e-cellbox>
        </div>
        <!--教学信息-->
        <div class="tem_cont">
          <el-row v-for="(item, index) in form.information.list" :key="index" v-if="item.value && form.information.value">
            <el-col :span="3">
              <b>{{item.name}}</b>
            </el-col>
            <el-col :span="21" v-if="!item.isCode">
              <el-row v-for="(sitem, sindex) in item.list" :key="sindex" v-if="sitem.value">
                <el-col :span="2">
                  {{sitem.name}}
                </el-col>
                <el-col :span="22">
                  <div v-if="sitem.type == 'checkbox'" class="tem_eol">
                    <el-checkbox-group v-model="sitem.valueData">
                      <el-checkbox v-for="(titem, tindex) in sitem.listValue" :key="tindex" :label="titem">{{titem}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-if="sitem.type == 'number'" class="tem_eol">
                    <el-input type="number" v-model="sitem.valueData" style="width:100px;"></el-input> {{sitem.unit}} <span class="remark_text">{{sitem.remark}}</span>
                  </div>
                  <div v-if="sitem.type == 'radio'" class="tem_eol">
                    <el-radio-group v-model="sitem.valueData" style="line-height:36px;">
                      <el-radio v-for="(fitem, findex) in sitem.list" :key="findex" :label="fitem">{{fitem}}</el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="21" v-else>
              <div v-if="item.type == 'textarea'">
                <el-input type="textarea" v-model="item.valueData" :maxlength="item.maxLength" :placeholder="item.placeholder" :rows="5" number-word></el-input>
              </div>
              <div v-if="item.type == 'checkbox'">
                <el-checkbox-group v-model="item.valueData">
                  <el-checkbox v-for="(stime, sindex) in item.listValue" :key="sindex" :label="stime">{{stime}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-if="item.type == 'number'">
                <el-input type="number" v-model="form.heartRate" style="width:100px;"></el-input> {{sitem.unit}} <span class="remark_text">{{sitem.remark}}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--title-->
        <div class="plan_show_title" v-if="form.cuurse.value">
          <e-cellbox middle class="title-manage">
            <e-cell-item class="planlft">
              <div class="plan_stitle"><span>教学过程</span><i></i></div>
            </e-cell-item>
          </e-cellbox>
        </div>
        <!--教学过程-->
        <div class="tem_cont">
          <el-row v-for="(item, index) in form.cuurse.list" :key="index" v-if="item.value && form.cuurse.value">
            <el-col :span="5" style="text-align:right; padding-right: 30px;">
              <div class="tab_title">
                <b>{{item.name}}</b>
                <p class="chart_tip" v-if="item.type == 'setRadio'">学生</p>
                <p class="chart_tip tip_coach" v-if="item.type == 'setRadio'">教练</p>
              </div>
            </el-col>
            <el-col :span="19">
              <div v-if="item.type == 'textarea'">
                <el-input type="textarea" v-model="item.valueData" :maxlength="item.maxLength" :placeholder="item.placeholder" :rows="5" number-word></el-input>
              </div>
              <div v-if="item.type == 'checkbox'">
                <el-checkbox-group v-model="item.valueData">
                  <el-checkbox v-for="(stime, sindex) in item.listValue" :key="sindex" :label="stime">{{stime}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-if="item.type == 'number'">
                <el-input type="number" v-model="item.valueData" style="width:100px;"></el-input> {{item.unit}} <span class="remark_text">{{item.remark}}</span>
              </div>
              <div v-if="item.type == 'setRadio'">
                <el-radio-group v-model="item.valueData">
                  <el-radio :label="1" style="margin-right:25px;"><img src="/static/images/training/s11.png" v-if="item.valueData==1"><img src="/static/images/training/s1.png" v-else></el-radio>
                  <el-radio :label="2" style="margin-right:25px;"><img src="/static/images/training/s22.png" v-if="item.valueData==2"><img src="/static/images/training/s2.png" v-else></el-radio>
                  <el-radio :label="3" style="margin-right:25px;"><img src="/static/images/training/s33.png" v-if="item.valueData==3"><img src="/static/images/training/s3.png" v-else></el-radio>
                  <el-radio :label="4" style="margin-right:25px;"><img src="/static/images/training/s44.png" v-if="item.valueData==4"><img src="/static/images/training/s4.png" v-else></el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--title-->
        <div class="plan_show_title" v-if="form.summary.value">
          <e-cellbox middle class="title-manage">
            <e-cell-item class="planlft">
              <div class="plan_stitle"><span>课后小结</span><i></i></div>
            </e-cell-item>
          </e-cellbox>
        </div>
        <!--课后小结-->
        <div class="tem_cont">
          <el-row v-if="form.summary.value">
            <el-col :span="3">
              <div class="tab_title">
                <b>{{form.summary.name}}</b>
              </div>
            </el-col>
            <el-col :span="21">
              <div v-if="form.summary.type == 'textarea'">
                <el-input type="textarea" v-model="form.summary.valueData" :maxlength="200" :placeholder="form.summary.placeholder" :rows="5" number-word></el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="button-box">
        <el-button @click="handleClose()">关 闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.form = JSON.parse(localStorage.getItem('tem_data'))
    this.title = this.form.temName ? this.form.temName + '教案模板预览' : '教案模板预览'
  },
  data () {
    return {
      title: '',
      form: {}
    }
  },
  methods: {
    handleClose () {
      window.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.tem_preview{
  margin-bottom:100px;
  .plan_show_title{
    height: 36px;
    margin-bottom: 50px;
    margin-top: 80px;
    .planlft{
      width: 800px;
      position: relative;
      i{
        position: absolute;
        top: 18px;
        display: block;
        width: 100%;
        height: 1px;
        line-height: 1px;
        background: #efefef;
        z-index: 1;
      }
      span{
        position: absolute;
        left: 344px;
        top: 0px;
        display: block;
        width: 112px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        font-size: 16px;
        background: #eee;
        border-radius: 18px;
        z-index: 2;
      }
    }
  }
  .el-radio-group{
    line-height:40px!important;
  }
  .tem_eol{
    display: inline-block;
  }
  .el-col{
    line-height: 40px;
  }
  .remark_text{
    font-size: 12px;
    color:#666;
  }
  .chart_tip{
    text-align: center;
    font-weight:normal;
    position: relative;
    line-height: 26px;
    &:before{
      position: absolute;
      top:8px;
      left:42px;
      display: table;
      content: "";
      width:10px;
      height:10px;
      background:#00bb90;
    }
  }
  .tip_coach{
    &:before{
      border-radius: 50%;
    }
  }
  .el-row{
    margin-bottom:25px;
  }
}
</style>
